
import React, { KeyboardEvent, MouseEvent, MouseEventHandler, useContext, useEffect } from "react";

import { getEditorEnvironment } from "./EditorEnvContext";
import EditorEnvironment from "../dodoco/editor/EditorEnvironment";

type _SceneViewCompProp = {};

import './Editor.css';
import { getEditorViewport } from "./EditorViewportHook";
import { UI_MENU_BAR_HEIGHT } from "./Config";

export default function(prop: _SceneViewCompProp) {
    const env = getEditorEnvironment();
    const {width, height} = getEditorViewport();

    useEffect(() => {
        env.editorSceneViewUpdate.bind(env);
        env.editorSceneViewUpdate(0);
    }, [])

    const handleCanvasMouseDown = (e: MouseEvent) => {
        e.preventDefault();
        env.onSceneViewMouseDown(e);
    }

    const handleCanvasMouseUp = (e: MouseEvent) => {
        e.preventDefault();
        env.onSceneViewMouseUp(e);
    }
    
    const handleCanvasMouseMove = (e: MouseEvent) => {
        e.preventDefault();
        env.onSceneViewMouseMove(e);
    }

    return (
        <>
            <div className="EditorSceneViewBox" style={{
                height: height - UI_MENU_BAR_HEIGHT,
                width: width * 0.8,
            }}>
            <canvas 
                onMouseDown={handleCanvasMouseDown}
                onMouseUp={handleCanvasMouseUp} 
                onMouseMove={handleCanvasMouseMove}

                onContextMenu={(e) => e.preventDefault()}

                ref={elem => env?.initSceneViewCanvas(elem)}
                
                style={{
                    width: width * 0.8,
                }}>
            </canvas>
            </div>
        </>
    );
}
